<template>
    <div class="box">
        <!-- <van-nav-bar title="标题" fixed />
        <div style="height: 4.5rem;"></div> -->
        <headers title="我的"></headers>

        <van-tabs v-model:active="active" sticky animated offset-top="4.5rem">
            <van-tab title="全部">
                <!-- <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in list" :key="image">
                        <img :src="image.image_src" style="width: 100%;" />
                    </van-swipe-item>
                </van-swipe> -->
                <swipers :list="list"></swipers>

                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="(v,i) in listData" :key="i" :style="i%2==0?'height:19rem':'height:26rem'">
                        <van-image :src="v.goods_small_logo?v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                        <p>{{ v.goods_name }}</p>
                    </van-grid-item>
                   
                </van-grid>
            </van-tab>
            <van-tab title="喜好">内容 2</van-tab>
            <van-tab title="新款">内容 3</van-tab>
            <van-tab title="其他">内容 4</van-tab>
        </van-tabs>
    </div>

</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

import { ref } from 'vue';
import { swiperdataApi,searchApi } from '@/api/api';
import headers from '@/components/headers.vue';
import swipers from '@/components/swipers.vue';
const active = ref(0);
let list = ref("")
const getlist = () => {
    swiperdataApi().then(res => {
        list.value = res.data.message
    })
}
getlist()

let listData = ref("")
const getsearchApi = () => {
    searchApi().then(res => {
        console.log(res);
        
        listData.value = res.data.message.goods
    })
}
getsearchApi()
</script>

<style lang="scss" scoped></style>